import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import { Search, TrendingUp, Menu, X, Zap, BarChart3 } from 'lucide-react';
import { useState } from 'react';
import VisitorCounter from './VisitorCounter';

const Header = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const location = useLocation();

  const navigation = [
    { name: '首页', href: '/', icon: BarChart3, gradient: 'from-blue-500 to-purple-600' },
    { name: '搜索', href: '/search', icon: Search, gradient: 'from-purple-500 to-pink-600' },
  ];

  const isActive = (path) => location.pathname === path;

  return (
    <header className="glass-effect sticky top-0 z-50 border-b border-white/20 backdrop-blur-xl">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-20">
          {/* Logo */}
          <Link to="/" className="flex items-center space-x-3 group">
            <div className="relative">
              <div className="absolute inset-0 bg-gradient-to-r from-primary-500 to-accent-500 rounded-2xl blur opacity-75 group-hover:opacity-100 transition-opacity" />
              <div className="relative bg-gradient-to-r from-primary-500 to-accent-500 p-3 rounded-2xl">
                <Zap className="h-8 w-8 text-white" />
              </div>
            </div>
            <div className="flex flex-col">
              <span className="text-2xl font-display font-bold gradient-text">热点追踪</span>
              <span className="text-xs text-gray-500 -mt-1">实时热点监控</span>
            </div>
          </Link>

          {/* Desktop Navigation */}
          <nav className="hidden md:flex items-center space-x-2">
            {navigation.map((item) => {
              const Icon = item.icon;
              const active = isActive(item.href);
              return (
                <Link
                  key={item.name}
                  to={item.href}
                  className={`group relative flex items-center space-x-2 px-6 py-3 rounded-2xl font-medium transition-all duration-300 ${
                    active
                      ? 'bg-white shadow-lg transform scale-105'
                      : 'hover:bg-white/10 hover:scale-105'
                  }`}
                >
                  <div className={`p-1.5 rounded-xl bg-gradient-to-r ${item.gradient} ${active ? 'shadow-md' : ''}`}>
                    <Icon className="h-4 w-4 text-white" />
                  </div>
                  <span className={`font-semibold ${
                    active ? 'gradient-text' : 'text-gray-700 group-hover:text-gray-900'
                  }`}>
                    {item.name}
                  </span>
                  {active && (
                    <div className="absolute inset-0 bg-gradient-to-r from-primary-500/10 to-accent-500/10 rounded-2xl" />
                  )}
                </Link>
              );
            })}
          </nav>

          {/* 实时指示器 */}
          <div className="hidden md:flex items-center space-x-4">
            <div className="flex items-center space-x-2 px-4 py-2 bg-white/10 rounded-full backdrop-blur-sm">
              <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
              <span className="text-sm font-medium text-gray-700">实时更新</span>
            </div>
            <VisitorCounter />
          </div>

          {/* Mobile menu button */}
          <button
            className="md:hidden floating-btn p-3 rounded-2xl bg-white/10 backdrop-blur-sm text-gray-700 hover:text-primary-600 hover:bg-white/20 transition-all"
            onClick={() => setIsMenuOpen(!isMenuOpen)}
          >
            {isMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
          </button>
        </div>

        {/* Mobile Navigation */}
        {isMenuOpen && (
          <div className="md:hidden py-4 border-t border-white/20 animate-slide-up">
            <nav className="flex flex-col space-y-2">
              {navigation.map((item) => {
                const Icon = item.icon;
                const active = isActive(item.href);
                return (
                  <Link
                    key={item.name}
                    to={item.href}
                    className={`group flex items-center space-x-3 px-4 py-3 rounded-2xl font-medium transition-all duration-300 ${
                      active
                        ? 'bg-white shadow-lg'
                        : 'hover:bg-white/10'
                    }`}
                    onClick={() => setIsMenuOpen(false)}
                  >
                    <div className={`p-2 rounded-xl bg-gradient-to-r ${item.gradient}`}>
                      <Icon className="h-4 w-4 text-white" />
                    </div>
                    <span className={`font-semibold ${
                      active ? 'gradient-text' : 'text-gray-700'
                    }`}>
                      {item.name}
                    </span>
                  </Link>
                );
              })}
            </nav>
          </div>
        )}
      </div>
      
      {/* 底部光晕 */}
      <div className="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-3/4 h-px bg-gradient-to-r from-transparent via-primary-500/30 to-transparent" />
    </header>
  );
};

export default Header;